<template>
  <div id="haoping">
    <div class="top-rated2">
      <p class="title">最受好评电影</p>
      <div class="content123">
        <PraiseMov v-for="item in praise" :key="item.movieId" :item="item" />
      </div>
    </div>

    <div class="List">
      <MovList v-for="list in movielist" :key="list.id" :list="list" />
    </div>
  </div>
</template>

<script>
import PraiseMov from "@/components/PraiseMov.vue";
import MovList from "@/components/MovList.vue";
export default {
  components: {
    PraiseMov,
    MovList,
  },
  data: function () {
    return {
      praise: [],
      movielist: [],
    };
  },

  created: function () {
    // console.log(this.$route.params.id);
    this.axios
      .get("https://apis.netstart.cn/maoyan/index/topRatedMovies")
      .then((res) => {
        console.log(res, this);
        this.praise = res.data.movieList;
      });

    this.axios
      .get("https://apis.netstart.cn/maoyan/index/movieOnInfoList")
      .then((res) => {
        console.log(res, this);
        this.movielist = res.data.movieList;
      });
  },
};
</script>

<style lang="less">
#haoping {
  .top-rated2 {
    padding: 12px 15px;
    background-color: #fff;
    margin-bottom: 10px;
     position: relative;
top:155px;
    // .content{
    //   // width: 900px;
    // }
      .title {
        font-size: 14px;
        color: #333;
        margin: 0 0 12px;
      }
    .content123 {
      overflow: scroll;
      white-space: nowrap;
     
    }
    div::-webkit-scrollbar {
      display: none;
    }
  }
  .List {
    padding-left: 15px;
    background-color: #fff;
    position: relative;
    top: 150px;
  }
}
</style>